<template>
    <MercBox
      v-model="model"
      title="选择数据"
      :lazy="true"
      :height="530"
      :width="1100"
      :padding="10"
    >
      <!-- 设置查询条件 -->
      <div style="padding-bottom: 10px">
        <span style="margin-right: 20px">请选择数据</span>
        <el-input
          placeholder="元素符号"
          style="width: 200px"
          v-model="ElementSymbols"
        />
        <el-input
          placeholder="元素名称"
          style="width: 200px;margin-left: 10px;"
          v-model="ElementName"

        />
        <el-button
          type="primary"
          style="margin-left: 10px"
          size="medium"
          class="el-icon-zoom-out"
          @click="search"
          >搜索</el-button
        >
      </div>
      <!-- merc-table配置的这些属性见MercTable组件api文件  单选: :single="true"-->
      <merc-table
        ref="mytable"
        :loadKey="true"
        :columns="columns"
        :pagination="pagination"
        :pagination-hide="false"
        :max-height="380"
        :url="url"
        :index="true"
       
        :defaultLoadPage="false"
        @loadBefore="loadTableBefore"
      ></merc-table>
      <template #footer>
        <div>
          <el-button
            size="mini"
            type="primary"
            @click="addRow()"
            >添加选择的数据</el-button
          >
          <el-button size="mini" icon="el-icon-close" @click="model = false"
            >关闭</el-button
          >
        </div>
      </template>
    </MercBox>
  </template>
  <script>
  import MercBox from "@/components/basic/MercBox.vue";
  import MercTable from "@/components/basic/MercTable.vue";
  export default {
    components: {
        MercBox: MercBox,
        MercTable: MercTable,
    },
    data() {
      return {
        model: false,
        ElementSymbols: "",
        ElementName:"",
        url: "api/BaseElement/getPageData",
        columns: [
          {field:'Id',title:'主键',width:110,sort: true },
          {field:'ElementSymbols',title:'元素符号',width:110,sort:true},
          {field:'ElementName',title:'元素名称',width:110,sort:true},
          { field: "CreateUserName", title: "创建人", width: 130, sort: true },
          {
            field: "CreateDate",
            title: "创建时间",
            type: "datetime",
            width: 145,
            sort: true,
          },
        ],
        pagination: {},
        detail: {}, //明细表选择的行
      };
    },
    methods: {
      open(detail) {
        this.detail = detail;
        this.model = true;
        //打开弹出框时，加载table数据
        this.$nextTick(() => {
          this.$refs.mytable.load();
        });
      },
      search() {
        this.$refs.mytable.load();
      },
      addRow() {
        var rows = this.$refs.mytable.getSelected();
        if (!rows || rows.length == 0) {
          return this.$Message.error("请选择行数据");
        }
        for(var i= 0 ;i < rows.length;i++){
            if(this.detail.rowData.some(c=>c.ElementId === rows[i].Id))
                continue;
            //给当前行设置值
            this.detail.addRow({
                ElementId:rows[i].Id,
                ElementSymbols:rows[i].ElementSymbols,
                ElementName : rows[i].ElementName,
                Enable:1,
                DeletionFlag:0
            });
        }
        this.model = false;        
      },
      loadTableBefore(params) {
        //查询前，设置查询条件
        params.wheres = [
          { name: "ElementSymbols", value: this.ElementSymbols, displayType: "like" },
          { name: "ElementName", value: this.ElementName, displayType: "like" }
        ];
        return true;
      },
    },
  };
  </script>